<template>
	<view class="mailList"  :class="APPTheme">
		<uni-nav-bar fixed status-bar left-icon="back"  :title="title" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickLeft="clickLeftback"></uni-nav-bar>
		<view class="top">
			<view class="example-body">
				<uni-search-bar radius="100" class="uni-search-bar" clearButton="always" placeholder="关键词" @confirm="search" @input="input"
				 @cancel="cancel" />
			</view>
			<view class="addressBook">
				<scroll-view  scroll-x="true" >
					<view class="scroll-view_H">
						<view class="scroll-item"><view  @click="MailList({key:''},0)">通讯录</view></view>
						<view class="scroll-item" v-for="(item,index) in org.departmentsParen" :key="index"><uni-icons type="arrowright" color="#8f8f94" size="14" class="uni-icons" /><view  @click="MailList(item,1)">{{item.roleName}}</view></view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="ul">
			<checkbox-group class="checkbox-group" >
				<label class="el-checkbox" v-for="(item,index) in org.departments"
				 :label="item.roleName" :key="index"  @tap="handCheckedCitiesOrg(item,index)">
					<view class="org-list-item">
						<checkbox :value="item.id" :checked="item.checked" color="#3396fb" style="transform:scale(0.8);"/>
						<view class="li theme-bg-active">
							<view class="label"><view class="wenjianjia"></view> {{item.roleName}}</view>
							<view class="iconfont icon-xiaji" @click.stop="subordinate(item)" :class="{subDisabald:item.checked}">下级</view>
						</view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view class="bottom theme-border-top-8 theme-bg">
			<view  v-if="check.employees.length>0">
				<checkbox-group class="checkbox-group " >
					<label class="el-checkbox" v-for="(item,index) in check.employees"
					 :label="item.name" :key="index"  @tap="handCheckedCities(item,index)">
						<checkbox :value="item.id" :checked="item.checked" color="#3396fb" style="transform:scale(0.8);font-size: 12px;"/>{{item.name}}
					</label>
				</checkbox-group>
			</view>
			<u-empty text="暂无数据" mode="data" v-else></u-empty>
		</view>
		<view class="footer" :class="APPTheme" v-if="check.employeesList.length>0||org.departmentsList.length>0">
			<view class="left">已选择：<text v-if="check.employeesList.length>0">{{check.employeesList.length}}人 , </text><text v-if="org.departmentsList.length>0">{{org.departmentsList.length}}角色组</text></view>
			<view class="rigth" @click="endEmployees">确定</view>
		</view>
		
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		computed:{
			...mapGetters(['APPTheme', 'userInfo', 'api']),
		},
		data() {
			return {
				onoff:false,//防止多次请求
				title:'通讯录',
				searchValue:"",//搜索值
				departmentId: '', //父级组织id,如果为null,则查询根节点公司id下的通讯录(部门列表+员工列表)信息
				deviceId:'',
				//人员
				check: {
					employees: [], //后台数据人列表
					employeesList: [], //已选择的人列表(用于回显)
				},
				// 组织
				org:{
					departments: [], //组织列表
					departmentsList: [], //已选择的组织列表(用于回显)
					departmentsParen: [], //组织面包屑
				}
			}
		},
		onLoad(e) {
			console.log(e);
			that=this
			this.title=e.title
			this.getOrganizationalToApplicationForm()
			if(e.data){
				this.check.employeesList=JSON.parse(e.data).employeesList//已选择人
				this.org.departmentsList=JSON.parse(e.data).roleList//已选择组织
			}
		},
		onShow() {
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
		},
		methods: {
			//返回
			clickLeftback(){
				if(!that.isCheckbox){
					uni.navigateBack({
						delta: 1
					});
				}
			},
			//申请用章时调用的选取审批人
			getOrganizationalToApplicationForm() {
				return new Promise((reslove,reject)=>{
					that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_findUserByRoleId, {
						id: that.departmentId,
						// deviceId:that.deviceId,
						keyword: that.searchValue
					}, function(res) {
						if (res.code =='0'&&res.data) {
							try{
								if(that.departmentId||that.searchValue){
									that.org.departments = []
									//获取的人
									that.check.employees = res.data.map(res=>{
										return {
											checked:false,
											...res
										}
									})
								}else{
									that.check.employees = []
									//获取的部门
									that.org.departments = res.data.map(res=>{
										return {
											checked:false,
											...res
										}
									})
								}
							}catch(e){
								that.check.employees = []
								that.org.departments = []
							}
							reslove('成功')
							//回显人
							that.echoDisplay()
							//回显组织
							that.echoDisplayOrg()
						}else{
							//获取的部门
							that.org.departments = []
							that.check.employees = []
							reject('失败')
						}
					});
				})
				
			},
			//点击通讯录
			MailList(item, type) {
				console.log(item, type);
				that.departmentId = item.id
				that.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
				if (type == 1) {
					that.org.departmentsParen.forEach((res, index) => {
						if (item.id == res.id) {
							that.org.departmentsParen = that.org.departmentsParen.slice(0, index + 1)
						}
					})
				} else {
					that.org.departmentsParen = []
				}
				//回显人
				that.echoDisplay()
				//回显组织
				that.echoDisplayOrg()
			
			},
			//下级
			async subordinate(item) {
				console.log(item);
				if(!that.onoff&&!item.checked){//防止多次点击
					that.onoff=true
					that.departmentId = item.id
					let res=await that.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
					if(res=='成功'){
						that.org.departmentsParen.push(item)
						that.onoff=false
					}
					//回显人
					that.echoDisplay()
					//回显组织
					that.echoDisplayOrg()
				}
				
			},
			//回显人
			echoDisplay() {
				for(let a=0;a<that.check.employees.length;a++){
					const item=that.check.employees[a]
					let {kets ,values,entries} =Object
					for(let [kets,values] of entries(that.check.employeesList)){
						if(values.id==item.id){
							that.$set(item,'checked',true)
						}
					}
				}
			},
			//回显组织
			echoDisplayOrg() {
				for(let a=0;a<that.org.departments.length;a++){
					const item=that.org.departments[a]
					let {kets ,values,entries} =Object
					for(let [kets,values] of entries(that.org.departmentsList)){
						if(values.id==item.id){
							that.$set(item,'checked',true)
						}
					}
				}
			},
			//已选择的人
			handCheckedCities(e,index){
				if(e.checked){//删除
					that.check.employees[index].checked=false
					that.check.employeesList=that.check.employeesList.filter(res=>res.id!=e.id)
				}else{//添加
					that.check.employees[index].checked=true
					that.check.employeesList.push({
						checked:true,
						...e
					})
				}
				console.log(that.check.employeesList);
			},
			//已选择的组织
			handCheckedCitiesOrg(e,index){
				console.log(e);
				if(e.checked){//删除
					that.org.departments[index].checked=false
					that.org.departmentsList=that.org.departmentsList.filter(res=>res.id!=e.id)
				}else{//添加
					that.org.departments[index].checked=true
					that.org.departmentsList.push({
						checked:true,
						...e
					})
				}
			},
			//点击确认
			endEmployees(){
				let req={
					name:'角色',
					type:that.title,
					employeesList:that.check.employeesList,//人
					departmentsList:that.org.departmentsList//组织
				}
				uni.$emit('mail_confirm',req)
				uni.navigateBack({
					delta:1
				})
			},
			//搜索
			search(res) {
				this.searchValue=res.value
				this.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
			},
			input(res) {
				this.searchValue=res.value
				this.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
			},
			cancel(res) {
				this.searchValue=''
				this.getOrganizationalToApplicationForm()//申请用章时调用的选取审批人
			}
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	@import '../mailList/mailList.scss';
</style>
